<template>
	<view class="tabbar">
		<uv-tabbar :value="current" @change="tabbarChange" activeColor="#000000">
			<uv-tabbar-item v-for="(item, index) in tabbarList" :key="index" :text="item.text"
				:badge="item.text === '购物车'?badge:0">
				<template #active-icon>
					<image :class="item.text === '代理' ? 'icon-radius' : 'icon'" :src="item.selectIcon"></image>
				</template>
				<template #inactive-icon>
					<image :class="item.text === '代理' ? 'icon-radius' : 'icon'" :src="item.icon"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { switchTab } from '@/utils/router.js';

	const badge = ref(5)

	const props = defineProps({
		current: {
			type: Number,
			default: 0
		}
	});

	const tabbarList = [{
			text: "首页",
			pagePath: "/pages/index/index",
			icon: "/static/tabbar/index.png",
			selectIcon: "/static/tabbar/index-active.png"
		},
		{
			text: "分类",
			pagePath: "/pages/classify/index",
			icon: "/static/tabbar/classify.png",
			selectIcon: "/static/tabbar/classify-active.png"
		},
		{
			text: "代理",
			pagePath: "/pages/agent/index",
			icon: "/static/tabbar/agent.gif",
			selectIcon: "/static/tabbar/agent.gif"
		},
		{
			text: "购物车",
			pagePath: "/pages/shopping-cart/index",
			icon: "/static/tabbar/shopCart.png",
			selectIcon: "/static/tabbar/shopCart-active.png"
		},
		{
			text: "我的",
			pagePath: "/pages/user/index",
			icon: "/static/tabbar/user.png",
			selectIcon: "/static/tabbar/user-active.png"
		}
	];

	const tabbarChange = (e) => {
		switchTab(tabbarList[e].pagePath);
	};
</script>

<style lang="scss" scoped>
	.tabbar {
		--icon-radius-top: 6rpx;
		--icon-radius-width: 58rpx;
		--icon-width: 40rpx;

		.icon {
			padding-top: calc(var(--icon-radius-width) + var(--icon-radius-top) - var(--icon-width));
			width: var(--icon-width);
			height: var(--icon-width);
			display: block;
		}

		.icon-radius {
			margin-top: var(--icon-radius-top);
			width: var(--icon-radius-width);
			height: var(--icon-radius-width);
			display: block;
			border-radius: 50%;
		}
	}
</style>